<template>
  <view class="page">
    <scroll-view class="page-scroll" scroll-y="true" @scrolltolower="loadMoreData(false)">
      <view class="group_2 flex-col" v-for="(item, index) in tableData" :key="index" >
        <view class="flex-col" >
          <view class="group_3 flex-col"></view>
          <text class="text_4">
            {{ item.name }}
          </text>
          <view class="group_4 flex-col"></view>
          <text class="text_5">{{ item.class_name }}</text>
          <view class="group_5">
            <view class="text-wrapper">
              <text class="text">发布时间</text>
              <text class="text">{{ item.publish_date }}</text>
            </view>
            <view class="text-wrapper">
              <text class="text">完成率</text>
              <view class="text-wrapper">
                <text class="text_1">{{ item.finished_count }}</text>
                <text class="text_2">/{{ item.student_count }}</text>
              </view>
            </view>
            <view class="text-wrapper">
              <text class="text">作业评分</text>
              <view class="text-wrapper">
                <text class="text_1">{{ item.score_count }}</text>
                <text class="text_2">/{{ item.student_count }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="group_4 flex-col"></view>
        <view class="group_6 flex-row justify-around">
          <view class="image-text_1 flex-row justify-between" @click="showDeletePopup(item)">
            <image class="thumbnail_5" referrerpolicy="no-referrer"
              src="./img/icon_delete.png" />
            <text class="text-group_2">删除</text>
          </view>
          <view class="thumbnail_6" />
          <view class="image-text_2 flex-row justify-between" @click="navigateToDetail(item)">
            <image class="thumbnail_7" referrerpolicy="no-referrer"
              src="./img/icon_edit.png" />
            <text class="text-group_3">详情</text>
          </view>
        </view>

      </view>
      <text class="text_9" v-if="isFinish">没有更多了～</text>
    </scroll-view>
     <!-- 弹窗 -->
    <uni-popup ref="deletePopup" background-color="#fff" borderRadius="12px 12px 0px 0px" :mask-click="false">
      <view class="delete-popup-content">
        <view class="delete-popup-header">
          删除作业
          <view class="close-icon" @click="closeDeletePopup">
            <image class="close-icon-image" referrerpolicy="no-referrer" src="./img/close.png" />
          </view>
        </view>
        <view class="delete-popup-body">
          <view class="delete-btn" @click="handleDelete">确认</view>
        </view>
      </view>
    </uni-popup>
    <tabBar :tabIndex="1" v-if="isShowTabBar"></tabBar>
  </view>
</template>

<script>
import API from "@/api/teacherapi";
export default {
  data() {
    return {
      tableData: [],
      current: 1,
      pageSize: 10,
      isFinish: false,
      isShowTabBar:true,
      select_homework_id:''
    };
  },
  async onLoad() {
    uni.hideTabBar({
      animation: false
    })
    await this.loadMoreData(true)
  },
  methods: {
    showDeletePopup(item) {
      this.select_homework_id = item.homework_id
      this.isShowTabBar = false
      this.$refs.deletePopup.open('bottom')
    },
    closeDeletePopup() {
      this.$refs.deletePopup.close()
      this.isShowTabBar = true
    },
   async handleDelete() {
     await API.HomeworkDelete({ homework_id: this.select_homework_id })
        uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
          this.closeDeletePopup()
          this.loadMoreData(true)
    },
    navigateToDetail(item) {
      uni.navigateTo({
        url: '/pages/teacher/job/detail?homework_id=' + item.homework_id
      })
    },
    async loadMoreData(reset = false) {
      if (reset) {
        console.log(reset, 'treset')
        this.current = 1
        this.tableData = []
      }
      console.log(this.current, 'this.current222')
      let param = {
        current: this.current,
        pageSize: this.pageSize,
        experiment_category_idArray: [],
        for_student: false,
        for_teacher: true,
      }
      let res = await API.HomeworkPagedList({ args: param })
      console.log('res', res)
      if (res) {

        console.log(this.tableData.length)
        if (this.tableData.length == res.total) {
          this.isFinish = true

        } else {
          console.log('111')
          this.tableData = this.tableData.concat(res.data)
          this.current++;
          console.log(this.current, 'this.current')
          this.isFinish = false;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.delete-popup-content {
  padding-top: 48rpx;

  .delete-popup-header {
    padding: 0 48rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #262626;
    height: 50rpx;
    line-height: 50rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .close-icon {
      width: 40rpx;
      height: 40rpx;

      .close-icon-image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .delete-popup-body {
    padding: 158rpx 56rpx 0 56rpx;
    height: calc(280rpx + env(safe-area-inset-bottom));

    .delete-btn {
      width: 100%;
      height: 92rpx;
      background: #FF4D4F;
      color: #fff;
      border-radius: 12rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      text-align: center;
      line-height: 92rpx;
    }
  }
}
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 100%;
  height: calc(100vh - (226rpx + env(safe-area-inset-bottom)));
  overflow: hidden;
  padding: 24rpx;

  .page-scroll {
    width: 100%;
    height: 100%;
  }

  .text_9 {
    overflow-wrap: break-word;
    color: rgba(191, 191, 191, 1);
    font-size: 24rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 34rpx;
    margin: 32rpx 300rpx 0 306rpx;
  }

  .group_2 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    width: 702rpx;
    align-self: center;
    padding: 24rpx 24rpx 0 24rpx;
    margin-bottom: 24rpx;

    .group_3 {
      background-color: rgba(216, 216, 216, 1);
      border-radius: 8px;
      width: 654rpx;
      height: 320rpx;
    }

    .text_4 {
      width: 654rpx;
      overflow-wrap: break-word;
      color: rgba(38, 38, 38, 1);
      font-size: 32rpx;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      line-height: 44rpx;
      margin-top: 24rpx;

    }

    .group_4 {
      width: 654rpx;
      height: 2rpx;
      margin-top: 22rpx;
      box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E6EBF1;
    }

    .text_5 {
      overflow-wrap: break-word;
      color: rgba(38, 38, 38, 1);
      font-size: 28rpx;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      white-space: nowrap;
      line-height: 40rpx;
      margin: 24rpx 524rpx 0 0;
    }

    .group_5 {
      width: 100%;
      margin: 24rpx 16rpx 0 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .text-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .text {
          overflow-wrap: break-word;
          color: rgba(140, 140, 140, 1);
          font-size: 28rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 40rpx;
        }

        .text-wrapper {
          width: 82rpx;
          height: 40rpx;
          overflow-wrap: break-word;
          font-size: 0;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          line-height: 40rpx;
          margin: 16rpx 0 0 216rpx;
          display: flex;
          justify-content: flex-end;

          .text_1 {
            overflow-wrap: break-word;
            color: rgba(0, 192, 144, 1);
            font-size: 28rpx;
            font-weight: normal;
            text-align: right;
            white-space: nowrap;
            line-height: 40rpx;
          }

          .text_2 {
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 28rpx;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }
        }
      }
    }

    .group_6 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      width: 654rpx;
      margin-top: 24rpx;
      padding: 28rpx 0 28rpx 0;

      .image-text_1 {
        width: 100rpx;

        .thumbnail_5 {
          width: 32rpx;
          height: 32rpx;
          margin: 4rpx 0 4rpx 0;
        }

        .text-group_2 {
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 28rpx;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          line-height: 40rpx;
        }
      }

      .thumbnail_6 {
        width: 2rpx;
        height: 24rpx;
        margin: 8rpx 0 8rpx 0;
        background: #E6EBF1;
        
      }

      .image-text_2 {
        width: 100rpx;

        .thumbnail_7 {
          width: 32rpx;
          height: 32rpx;
          margin: 4rpx 0 4rpx 0;
        }

        .text-group_3 {
          overflow-wrap: break-word;
          color: rgba(38, 38, 38, 1);
          font-size: 28rpx;
          font-weight: normal;
          text-align: right;
          white-space: nowrap;
          line-height: 40rpx;
        }
      }
    }
  }
}
</style>